<script setup>
import { reactive } from 'vue'
import useViewEvent from '@/core/hooks/useViewEvent'
import configApi from '@/api/system/ConfigApi'

const state = reactive({ 
  visible: false,  
  loading: false, // 加载开关
})
// 表单结构
const original = {
  id: '',
  code: '',
  name: '',
  type: '',
  value: '',
  notes: '',
  values: []
}
// 表单数据
const formState = reactive({})

// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: configApi.getFormModelById, formState: formState, original: original })
// 定义列表字段
const columns = [
  { title: '文本', dataIndex: 'label'},
  { title: '值', dataIndex: 'value' },
  { title: '排序', dataIndex: 'idx' }
]
//向父组件暴露方法和属性
defineExpose({ InitializeData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看字典信息`"
    placement="right"
    :width="'50%'">
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="标识">{{ formState.code }}</a-descriptions-item>
          <a-descriptions-item label="名称">{{ formState.name }}</a-descriptions-item>
          <a-descriptions-item label="类型"><a-tag color="#2db7f5">{{ formState.type=='single' ?'单项值':'列表值' }}</a-tag></a-descriptions-item>
          <a-descriptions-item v-if="formState.type=='single'" label="单项值">{{ formState.value }}</a-descriptions-item>
          <a-descriptions-item v-if="formState.type=='list'" label="列表值">
            <a-table
              :columns="columns"
              :data-source="formState.values"
              :pagination="false" />
          </a-descriptions-item>
      
          <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
        </a-descriptions>
      </a-spin>
    </a-card>
  </a-drawer>
</template>